<template>
	<view class="content">
		<u-no-network></u-no-network>

		<view class="info">
			<view class="info1">
				<text>姓名</text>
				<input type="text" v-model="name" value="" placeholder="请输入姓名" />
			</view>
			<view class="info2">
				<text>手机号</text>
				<input type="number" v-model="mobile" value="" placeholder="请输入手机号" />
			</view>
			<view class="info2">
				<text>身份证号码</text>
				<input type="text" v-model="idcard" value="" placeholder="请输入身份证号码" />
			</view>
			<view class="info2">
				<text>邀请码</text>
				<input type="number" v-model="user_invitestr" value="" placeholder="请输入邀请码" />
			</view>

			<view class="info3">
				<text>银行卡号</text>
				<input type="number" value="" @input="bankCardNo" v-model="bank_card" placeholder="请输入银行卡卡号" />
			</view>
		</view>
		<view class="shop">
			<text>身份证正反面</text>
			<u-upload
				ref="uUpload"
				max-count="2"
				:action="action"
				:auto-upload="true"
				@on-success="success1"
				width="190rpx"
				height="190rpx"
				multiple
				:header="header"
			></u-upload>
		</view>

		<view class="applyToSettleIn">
			<button type="default " @click="shengqing" v-if="xiugai">确认上传</button>
			<button type="default " @click="shengqing" v-else>确认修改</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {},
			type: 0, //类型 2认证月嫂 ； 3认证渠道
			mobile: '', //手机号码
			name: '', // 姓名
			bank_card: '', //银行卡卡号
			thumb: [], //身份证正反面照片
			user_invitestr: '', //  邀请码
			idcard: '', // 身份号码
			xiugai: true,
			action: 'https://kaola.qianjiwl.xyz/api/User/upload',
			header: {
				'XX-Token': uni.getStorageSync('token'),
				'XX-Device-Type': 'wxapp',
			},
			zhanwu: false,
		};
	},
	methods: {
		// 四位空格
		bankCardNo: function(newval) {
			console.log('四位空格 :>> ', newval);
			this.$nextTick(() => {
				var bankCardNo = newval.detail.value.replace(/\s/g, '').replace(/....(?!$)/g, '$& ');
				console.log(' this.bankCardNo :>> ', bankCardNo);
				this.bank_card = bankCardNo;
			});
		},
		//查询用户 2认证月嫂 ； 3认证渠道
		async queryUsr() {
			const res = await this.$u.post(
				'api/Allnews/user_attestation',
				{
					type: this.type,
				},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);

			console.log('查询用户 :>> ', res);
			if (!res.code) {
				this.zhanwu = true;
				return;
			}
			this.xiugai = false;
			this.data = res.data;
			this.mobile = res.data.mobile;
			this.name = res.data.name;
			this.bank_card = res.data.bank_card;
			this.user_invitestr = res.data.user_invitestr;
			this.idcard = res.data.idcard;
		},
		//上传身份证
		success1(index, lists) {
			this.thumb.push(index.data.url);
			console.log('this.thumb :>> ', this.thumb);
		},
		// 确认上传
		shengqing() {
			var bank_card = this.$u.trim(this.bank_card, 'all');
			console.log('银行卡号 :>> ', this.bank_card);
			if (this.mobile.length < 11) return uni.$showMsg('手机号码输入不正确');
			if (!this.name) return uni.$showMsg('姓名不能为空');
			if (!this.bank_card) return uni.$showMsg('银行卡号不能为空');
			if (this.thumb.length < 2) return uni.$showMsg('请上传身份证正反面照片');
			if (!this.idcard) return uni.$showMsg('身份证号码不能为空');
			if (!this.user_invitestr) return uni.$showMsg('邀请码不能为空');

			var list = {
				type: this.type,
				mobile: this.mobile,
				name: this.name,
				bank_card: bank_card,
				thumb: this.thumb,
				user_invitestr: this.user_invitestr,
				idcard: this.idcard,
			};
			if (this.data.wx_paystatus == 0) {
				uni.navigateTo({
					url: '../zhifu2/zhifu?list=' + JSON.stringify(list),
				});
			} else if (this.data.wx_paystatus == 1) {
				uni.$showMsg(this.data.status);
				uni.navigateTo({
					url: '../my',
				});
			} else if (this.zhanwu) {
				uni.navigateTo({
					url: '../zhifu2/zhifu?list=' + JSON.stringify(list),
				});
			}
		},
	},
	onLoad(e) {
		this.type = e.id;
		setTimeout(() => {
			this.loading = false;
		}, 2000);
		console.log('111 :>> ', 111);
		this.queryUsr();
	},
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;

	.shop {
		width: 690rpx;
		// height: 282rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 31rpx;
		margin-top: 20rpx;
		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:before {
			content: '*';
			color: #ff0000;
		}
	}

	.info {
		width: 690rpx;
		// height: 450rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 0 31rpx;
		.verificationCd {
			position: relative;
			.countdown {
				position: absolute;

				right: 50rpx;

				width: 110rpx;
				height: 60rpx;
				border-radius: 35rpx;
				//background-color: #007aff;
			}
		}

		.info1,
		.info2,
		.info3,
		.info4,
		.info5 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 131rpx;
			margin-left: 29rpx;
			border-bottom: 2rpx solid #f1eded;

			text {
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text:before {
				content: '*';
				color: #ff0000;
			}

			.inputStyle {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	.applyToSettleIn {
		button {
			margin-top: 99rpx;
			width: 690rpx;
			height: 100rpx;
			background: #671729;
			border-radius: 50rpx;

			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
